<template>
  <div>
    <section class="products text-center">
      <h3 class="mb-4">{{ $t('m.goodscomments') }}</h3>
      <div class="container">
        <textarea v-model="content" placeholder="请输入评论"></textarea>
        <br /><br />
        <Button color="blue" @click="comment">{{ $t('m.addacomment') }}</Button>
        <br /><br />
        <table v-for="(content,index) in com_list" :key="index">
          <tr>
            <td class="td1">{{ content.uid | user_filter }}：</td>
            <td class="td2">评论日期：{{ content.create_time | datetime }}</td>
          </tr>
          <tr>
            <td></td>
            <td class="td4">{{ content.content }}</td>
          </tr>
        </table>
        <br /><br />
        <div>
          <Pagination v-model="pagination" align="center" @change="changepage"></Pagination>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { config } from '../config';
import moment from 'moment'
export default {
  data() {
    return {
      // 评论内容
      content: '',
      // 评论列表
      com_list: [],
      // 用户信息字典
      myuser: {},
      // 评论时间
      dtime: '',
      // 商品id
      gid: '',
      // 分页变量
      pagination: {
        page: 1,
        size: 5,
        total: '',
      }
    }
  },
  mounted: function () {
    // 获取请求详情信息的商品id
    this.gid = this.$route.query.gid;
    // 声明变量
    window.that = this;
    // 调用获取用户列表方法
    this.get_user();
    // 调用获取评论方法
    this.get_comment();
  },
  // 自定义过滤器
  filters: {
    // 自定用户义方法
    user_filter(value) {
      // 通过key(用户id)取用户名
      return window.that.myuser[value]
    },
    // 自定义时间过滤器
    datetime(value) {

      return moment(value).format('YYYY-MM-DD HH:mm:ss');
    },
  },
  methods: {
    // 获取分页内容
    changepage() {
      this.get_comment();
    },
    // 获取所有用户
    get_user() {
      this.axios({
        url: config['baseurl'] + 'userlist/',
      }).then(resp => {
        console.log(resp)
        // 动态赋值
        for (let i = 0; i < resp.data.length; i++) {
          this.myuser[resp.data[i].id] = resp.data[i].username
        }
        console.log(this.myuser)
      })
    },
    // 添加评论方法
    comment() {
      // 判断，评论框如果输入为空，则进行提醒
      if (this.content == "") {
        this.$Message('评论内容不能为空')
        return false
      }
      this.axios({
        url: config['baseurl'] + 'insertcomment/',
        // 后端反序列化添加，使用post方法
        params: {
          gid: this.gid,
          uid: localStorage['uid'],
          content: this.content,
        }
      }).then(resp => {
        console.log(resp);
      }),
        this.axios({
          url: config['baseurl'] + 'insertcomment/',
          // 后端反序列化添加，使用post方法
          method: 'post',
          data: {
            gid: this.gid,
            uid: localStorage['uid'],
            content: this.content,
          }
        }).then(resp => {
          console.log(resp);
          // 判断，添加成功，将输入内容清空
          if (resp.data.code == 200) {
            this.$Message(resp.data.message);
            // 将评论内容和作者实时填充到评论容器中
            this.com_list.unshift({ 'uid': localStorage['uid'], 'content': this.content });
            this.com_list = this.com_list.slice(0, 5)
            this.content = '';
          }
        })
    },
    // 获取评论列表方法
    get_comment() {
      this.axios({
        url: config['baseurl'] + 'commentlist/',
        params: {
          gid: this.gid,
          page: this.pagination.page,
          size: this.pagination.size,
        }
      }).then(resp => {
        console.log(resp)
        this.com_list = resp.data.comment_ser;
        this.pagination.total = resp.data.total
      })
    },
  }
}
</script>

<style>
.td1 {
  line-height: 20px;
  width: 180px;
  color: blue;
  text-align: right;
}
.td2 {
  line-height: 20px;
  text-align: right;
}
.td4 {
  line-height: 50px;
  width: 80%;
  text-align: left;
  border-bottom: 1px solid rgb(238, 238, 238);
}
</style>